<template>
    <div class="work">
        <div class="List">
            <div class="title">To Do List</div>
            <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="newThing" @keydown.enter="add" class="addThing">
            <ul class="things">
                <li v-for="(item, index) in todo" ::key="item.id">
                    <input type="checkbox" :id="item.id" class="checkPro" v-model="item.selected">
                    <label :for="item.id">{{ item.content }}</label>
                </li>
            </ul>
            <div class="bottom-box">
                <div class="select">已选中 {{ selectedNum }} / 总数 {{ todo.length }}</div>
                <div class="button-box">
                    <div class="All-box">
                        <input type="checkbox" id="All" v-model="allSelected">
                        <label for="All">全选</label>
                    </div>

                    <button class="delete" @click="del">删除选中任务</button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { nanoid } from 'nanoid';

export default {
    name: 'work',
    components: {},
    data() {
        return {
            newThing: '',
            todo: [
                {
                    id: 0,
                    content: "吃饭",
                    selected: false
                },
                {
                    id: 1,
                    content: "睡觉",
                    selected: false
                },
                {
                    id: 2,
                    content: "敲代码",
                    selected: false
                },
            ],
            allSelected: false,
            // oldData: [],
            oldFlag: false,
        }
    },
    methods: {
        add() {
            this.todo.push({ id: nanoid(), content: this.newThing, selected: false });
            this.newThing = '';
        },

        // findById(item) {
        //     return item.id == this.currentId;
        // },

        // mark(id) {
        //     // console.log(id);
        //     this.currentId = id;
        //     let obj = this.todo.find(this.findById);
        //     // console.log(obj);
        //     // obj.selected = !obj.selected;
        //     // console.log(this.todo);

        // },
        // deleteById(item) {
        //     if (item.selected) {
        //         this.currentId = item.id
        //         let index = this.todo.findIndex((i) => {
        //             return i.id == item.id;
        //         });
        //         this.todo.splice(index, 1);
        //         // console.log(this.todo);

        //     }
        // },

        // clear() {
        //     let checkBoxs = document.querySelectorAll(".checkPro");
        //     for(let i = 0;i<checkBoxs.length;i++){
        //         console.log(checkBoxs[i]);
        //         checkBoxs[i].checked = false;

        //     }
        // },

        del() {
            // this.todo = this.todo.forEach(this.deleteById);
            // 清空所有多选框的选中状态
            // this.clear();

            let newData = [];

            for (let i of this.todo) {
                if (!i.selected) {
                    newData.push(i);
                }

            }

            this.todo = newData;

        },
    },
    computed: {
        selectedNum() {

            return this.todo.filter((item) => {
                return item.selected;
            }).length;

        }
    },
    watch: {
        allSelected: {
            handler(newVal, oldVal) {
                // console.log(`数据从 ${oldVal} 变更为 ${newVal}`);
                if (newVal) {
                    this.todo.forEach((i) => {
                        i.selected = true;
                    });
                } else {
                    if (!this.oldFlag) {
                        this.todo.forEach((i) => {
                            i.selected = false;
                        });
                    } else {
                        // this.todo = this.oldData;
                        this.oldFlag = false;
                    }

                }
            },
            deep: true,
            immediate: true
        },
        todo: {
            handler(newVal, oldVal) {
                // console.log(1);
                if (newVal.length == 0) {
                    this.allSelected = false;
                    // this.oldFalg = 
                }
                else {
                    let flag = newVal.every((i) => {
                        return i.selected;
                    });

                    if (flag) {
                        if (!this.allSelected) {
                            this.allSelected = true;
                        }
                    }
                    else {
                        if (this.allSelected) {
                            // this.oldData = newVal;
                            this.oldFlag = true;
                            this.allSelected = false;

                        }
                    }
                }


            },
            deep: true,
            immediate: true
        }
    },
}
</script>

<style lang="scss" scoped>
.List {
    width: 1000px;
    box-sizing: border-box;
    // height: 600px;
    background-color: aqua;
    border-radius: 20px;
    margin: 0 auto;
    border: 1px solid black;
    position: relative;
}

.title {
    width: 100%;
    height: 150px;
    font-size: 40px;
    text-align: center;
    line-height: 150px;
    font-weight: bold;
}

.addThing {
    width: 80%;
    box-sizing: border-box;
    margin: 0 10%;
    font-size: 30px;
    border-radius: 20px;
    height: 60px;
}

li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

.things {
    box-sizing: border-box;
    width: 80%;
    margin: 20px 10%;
    border: 1px solid black;
    border-radius: 20px;
    font-size: 26px;
    padding: 20px;
}

input[type="checkbox"] {
    zoom: 1.5;
}

.things li {
    margin: 5px 0;
    height: 40px;
    line-height: 40px;
}

.bottom-box {
    box-sizing: border-box;
    width: 80%;
    height: 50px;
    margin: 0 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}

.delete {
    font-size: 20px;
    border-radius: 10px;
    // border: 1px solid black;
    cursor: pointer;
    background-color: white;
}

.button-box {
    width: 230px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.All-box {
    display: flex;
    align-items: center;
}

// .delete:hover{
//     background-color: red;}</style>
